<!--
 * @Author: your name
 * @Date: 2021-08-16 20:29:49
 * @LastEditTime: 2021-08-24 17:18:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \新建文件夹 (3)\mappp\src\views\shou.vue
-->
<template>
  <div class="citys">
    <div class="head">
      <van-icon name="arrow-left" @click="goBack" />
      <span>城市选择</span>
      <span></span>
    </div>
    <div class="cheng">
      <p>当前城市</p>
      <li>上海</li>
      <van-index-bar :index-list="letter">
        <van-index-anchor index="热门城市" />
        <van-cell
          :title="item.label"
          v-for="item in CityList"
          :key="item.pinyin"
          @click="locationCity(item.label), getcityid(item)"
        />
        <div
          class="city"
          v-for="(v, i) in selectPositionList"
          :key="i"
          @click="locationCity(k.label), getcityid(k)"
        >
          <van-index-anchor :index="letter[i]" />
          <van-cell :title="k.label" v-for="(k, ind) in v" :key="ind" />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      selectPositionList: [], //所有城市
      CityList: [], //热门城市
      letter: [], //大写字母组成的数组
    };
  },
  methods: {
    //获取城市数据
    getSelectPositionList() {
      axios
        .get("http://47.102.145.189:8009/area/city?level=1", {
          params: { level: 1 },
        })
        .then((res) => {
          this.selectPositionList = res.data.body.sort((a, b) =>
            a.pinyin.localeCompare(b.pinyin)
          );
          localStorage.setItem;
          //创建类数组
          const letter = new Set(); //去重
          //将城市首字母转大写 推入到letter['A','B','C']
          res.data.body.forEach((v) => {
            letter.add("热");
            letter.add(v.short[0].toUpperCase()); //转大写
          });
          //将类数组转真正数组
          this.letter = [...letter];
          this.selectPositionList = this.letter.map((v1) => {
            return res.data.body.filter((v2) => {
              return v1.indexOf(v2.short[0].toUpperCase()) !== -1;
            });
          });
        });
    },
    //返回
    goBack() {
      this.$router.go(-1);
    },
    //热门城市
    getCityList() {
      axios.get("http://47.102.145.189:8009/area/hot").then((res) => {
        this.CityList = res.data.body;
      });
    },
    //点击事件获取label
    locationCity(label) {
      localStorage.setItem("label", label);
      this.$router.go(-1);
    },
    //点击事件获取value值
    getcityid(k) {
      localStorage.setItem("value", k.value);
    },
  },
  created() {
    //所有城市
    this.getSelectPositionList();
    //热门城市
    this.getCityList();
  },
};
</script>
<style lang="scss" scoped>
.head {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 18px;
}
.head i {
  height: 50px;
  line-height: 50px;
}
p {
  font-size: 14px;
  padding: 0.1rem 0.15rem;
  color: #999;
}
li {
  height: 0.5rem;
  padding: 0 0.15rem;
  line-height: 0.5rem;
  border-bottom: 0.01rem solid #eee;
  font-size: 14px;
  color: #333;
  background: #fff;
  cursor: pointer;
}
</style>
